<template>
	<scroll-view class="tabs_cp_scroll" scroll-x="true" :show-scrollbar="false">
		<view class="tabs_cp_scroll_content">
			<view 
				v-for="(item,index) in list" 
				:key="index"
				:style="{
					marginRight:'5px',
				}">
				<u-button 
					:type="index<=state || index == dqjd?'primary':'default'"
					:hair-line="true"
					mode="plain" 
					size="medium"
					:plain="index != dqjd?true:false"
					:custom-style="{
						padding:'0px 10px',
						height: '30px',
					}"
					@click="tabs_click(index,item)">
					{{item}}
				</u-button>
				<!-- :disabled='index > state' -->
			</view>
		</view>
	</scroll-view>
</template>

<script>
export default{  //项目进度 tab选项组件
	name:"Project_jd_tabs_cp",
	props:{
		dqjd:{  //当前进度
			type:Number,
			default:0,  //默认只进行到第一步
		},
		state:{
			default:0,
		}
	},
	mounted(){
	},
	data(){
		return{
			current:'', //当前激活项
			list:['前期工作','实施阶段','竣工阶段','结算阶段','移交阶段','效益评估'],
		}
	},
	methods:{
		tabs_click(index,item){  //触发组件属性
			// this.dqjd = index;
			this.$emit('change',{index,item});
		},
	},
	created(){
		
	},
}
</script>

<style lang="scss" scoped>
.tabs_cp_scroll{
	margin: 15px 0;
	width: 100%;
	@include flex_layout_row;
	justify-content: start;
	align-items: center;
	.tabs_cp_scroll_content{
		width: fit-content;
		min-width: 101vw;
		@include flex_layout_row;
		justify-content: start;
		align-items: center;
		flex-wrap: nowrap;
		u-button{
			margin-right: 5px;
			min-width: fit-content;
		}
	}
}
</style>
